<template>
  <div id="chartBarLine" :style="{ width: '100%', height: '100%' }"></div>
</template>

<script>
export default {
  data() {
    return {
      chartOption: {
        title: {
          text: '2019宽带业务管理违规数量及过去3年平均历史趋势（单位：万）',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['当期结果', '历史趋势（近三年）', '线性（当期结果）'],
          bottom: 0
        },
        xAxis: [
          {
            type: 'category',
            data: [
              '1月',
              '2月',
              '3月',
              '4月',
              '5月',
              '6月',
              '7月',
              '8月',
              '9月',
              '10月',
              '11月',
              '12月'
            ],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            interval: 20
          },
          {
            type: 'value',
            interval: 20
          }
        ],
        series: [
          {
            name: '当期结果',
            type: 'bar',
            itemStyle: {
              normal: {
                color: '#F1948A',
                lineStyle: {
                  color: '#F1948A'
                },
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: {
                    //数值样式
                    color: 'black',
                    fontSize: 12
                  }
                }
              }
            },
            data: [2.5, 2.6, 2.1, 2.4, 2.4, 2.1, 2.3, 2.1, 2.3, 2.0, 1.5, 1.9]
          },
          {
            name: '历史趋势（近三年）',
            type: 'bar',
            itemStyle: {
              normal: {
                color: '#CCD1D1',
                lineStyle: {
                  color: '#CCD1D1'
                },
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: {
                    //数值样式
                    color: 'black',
                    fontSize: 12
                  }
                }
              }
            },
            data: [1.1, 1.2, 0.8, 1.3, 1.3, 1.1, 1.8, 1.6, 1.4, 1.5, 1.5, 1.9]
          },
          {
            name: '线性（当期结果）',
            type: 'line',
            itemStyle: {
              normal: {
                color: '#00CCFF',
                lineStyle: {
                  color: '#00CCFF',
                  width: 1,
                  type: 'dotted' //'dotted'虚线 'solid'实线
                }
              }
            },
            data: [
              2.5,
              2.4,
              2.3,
              2.2,
              2.1,
              2.0,
              1.9,
              1.8,
              1.7,
              1.6,
              1.6,
              1.5,
              1.4
            ]
          }
        ]
      }
    }
  },

  mounted() {
    this.drawLine()
  },

  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('chartBarLine'))
      // 绘制图表
      myChart.setOption(this.chartOption)
    }
  }
}
</script>

<style lang="scss" scoped></style>
